<!--  -->
<template>
    <div>
        <div id="map"  ref="map" style="height: 410px;"></div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts';
import chinaJsonData from '../static/json/china.json'
// import hlj from '../static/json/hlj.json'
// import xj from '../static/json/xj.json'
console.log(chinaJsonData);

import axios from 'axios'

const map=ref<HTMLElement>();

const isreturn = ref(false); //响应
const dataList = ref(
    [
        { name: "西藏", value: [91.23, 29.5, 2333] },
        { name: "黑龙江", value: [128.03, 47.01, 1007] },
        { name: "北京市", value: [116.407387, 39.904179] }
    ]);

let mapChart: echarts.ECharts | null = null;
let mapOption: any = null;

const getMap = () => { //地图
    if (!mapChart) {
        mapChart = echarts.init(map.value);
    }

    mapOption = {
        // 背景颜色
        backgroundColor: "#00264e",
        // 提示浮窗样式
        tooltip: {
            show: true,
            trigger: "item",
            alwaysShowContent: false,
            backgroundColor: "#0C121C",
            borderColor: "rgba(0, 0, 0, 0.16);",
            hideDelay: 100,
            triggerOn: "mousemove",
            enterable: true,
            textStyle: {
                color: "#DADADA",
                fontSize: "12",
                width: 20,
                height: 30,
                overflow: "break",
            },
            showDelay: 100
        },
        map: 'china',
        roam: true,//是否启缩放和平移
        scaleLimit: {
            min: 1,
            max: 5
        },
        label: {
            normal: {
                show: true,
                fontSize: '10',
                color: '#fff'
            }
        },
        // 地图配置
        geo: {
            map: "china",
            nameMap: {

                "新疆维吾尔自治区": "新疆",
                "内蒙古自治区": "内蒙古",
                "西藏自治区": "西藏"

            },
            label: {
                // 通常状态下的样式
                normal: {
                    show: false,
                    textStyle: {
                        color: "#eee",
                    },
                },
                // 鼠标放上去的样式
                emphasis: {
                    textStyle: {
                        color: "#eee",
                    },
                },
            },
            // 地图区域的样式设置
            itemStyle: {
                normal: {
                    borderColor: "#ccc",
                    borderWidth: 1,
                    areaColor: {
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    },
                    shadowColor: "#457b9d",
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10,
                },
                // 鼠标放上去高亮的样式
                emphasis: {
                    areaColor: "#389BB7",
                    borderWidth: 0,
                },
            },
        },
        series: [
            {
                name: '站点信息',
                coordinateSystem: 'geo',
                type: 'scatter',
                geoIndex: 0,
                label: {
                    show: true,
                    formatter: '{b}'
                },
                itemStyle: {
                    normal: {
                        color: '#c23531',

                    },
                    emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        opacity: 0.5
                    }
                },
                symbolSize: 12,
                data: dataList.value
            }

        ],
    };
    // 地图注册，第一个参数的名字必须和option.geo.map一致
    echarts.registerMap('china', chinaJsonData as any);
    mapChart.setOption(mapOption);

    mapChart.on("click", (params) => {

        console.log(params);


        getProvinceJson(params.name);


    })


}
let province: Record<string, string> = {
    "china": "china",
    "黑龙江": "./static/json/hlj.json",
    "新疆": "./static/json/xj.json"
}
const getProvinceJson = async (name: string) => {

    let url = province[name];
    const res = await axios.get(url).catch(() => { });
    if (!res) return;

    mapChart?.clear();
    mapOption.geo.map = 'Pmap';
    echarts.registerMap('Pmap', res?.data);
    mapChart?.setOption(mapOption);



}

onMounted(() => {

    getMap();

})

onBeforeUnmount(()=>{
    // 销毁echarts
})


</script>
<style scoped></style>